<template>
  <div>
    <el-form
      :model="scope"
      :rules="rules"
      ref="scopeForm"
      label-width="80px"
      style="width: 70%"
    >
      <el-form-item :label="$t('common.name')" prop="name">
        <el-input v-model="scope.name"></el-input>
      </el-form-item>
      <el-form-item :label="'显示名称'" prop="displayName">
        <el-input v-model="scope.displayName"></el-input>
      </el-form-item>
      <el-form-item :label="'资源'" prop="resources">
        <el-input v-model="resourcesText" disabled></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel" size="small">取消</el-button>
      <el-button type="primary" @click="handleSubmit" size="small"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import { getResource, addResource, updateResource } from "@/api/identity";
export default {
  components: {},
  data() {
    return {
      scope: {
        name: "",
        displayName: "",
        resources: [],
      },
      rules: {
        name: [
          {
            required: true,

            message: this.$t("tips.requireItem"),
            trigger: "blur",
          },
        ],
        displayName: [
          {
            required: true,
            message: this.$t("tips.requireItem"),
            trigger: "blur",
          },
        ],
        resources: [
          {
            required: true,
            message: this.$t("tips.requireItem"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getData() {
      if (!this.name) return;
      getResource(this.name).then((res) => {
        if (!res) return;

        res.resources = this.toResourceArray(res.resources);

        this.scope = res || {};
      });
    },
    handleSubmit() {
      this.$refs["scopeForm"].validate((valid) => {
        if (valid) {
          this.saveData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveData() {
      if (!this.name) {
        addResource(this.scope).then((res) => {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          this.$emit("success", res);
        });
      } else {
        updateResource(this.scope).then((res) => {
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          this.$emit("success", res);
        });
      }
    },
    handleCancel() {
      this.$emit("close");
    },
    toResourceArray(resources) {
      if (!resources) return [];

      resources = resources.replace("[", "").replace("]");

      return [resources];
    },
  },
  created() {
    this.getData();
  },
  mounted() {},
  computed: {
    resourcesText() {
      if (!this.scope || !this.scope.resources) return "";

      return "[" + this.scope.resources.join() + "]";
    },
  },
  watch: {
    'scope.name': {
      handler(value) {
        this.scope.resources = [];
        if (value) this.scope.resources.push(value);
      },
      immediate: true,
      deep: true,
    },
  },
  props: {
    name: {
      type: String,
      default: null,
    },
  },
};
</script>
<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
